
<template>
    <div>
        <login-top Text="登录bilibili">
            <template v-slot:right>
                <div style="font-size:3.611vw" @click="$router.push('/register')">用户注册</div>
            </template>
        </login-top>

          <login-text label="账号"
          placeholder="请输入账号"
           @contentWatch="res => model.name = res"
           style="margin:4.167vw 0"
           >
          </login-text>

          <login-text label="密码"
              placeholder="请输入密码"
              type="password"
              @contentWatch="res => model.pass = res"
          >
          </login-text>

          <login-btn BtnText="登录" @TextClick="AjaxInsert"></login-btn>
    </div>
  </template>

<script>
import LoginTop from './components/LoginTop.vue'
import LoginText from './components/LoginText.vue'
import LoginBtn from './components/LoginBtn.vue'
import axios from 'axios'
export default {
  data () {
    return {
      model: {}
    }
  },
  components: {
    LoginTop,
    LoginText,
    LoginBtn
  },
  methods: {
    async AjaxInsert () {
      // const rulg = /^.{6,16}$/
      const rulg = /^.{1,16}$/
      if (rulg.test(this.model.username) && rulg.test(this.model.password)) {
        const res = await axios.post('http://localhost:3000/user', this.model)
        // this.$msg.fail(res.data.msg)
        console.log(res.data.data)
        if (res.data.data.status === 301 || res.data.data.status === 302) {
          return
        }
        localStorage.setItem('token', res.data.data.token)
        localStorage.setItem('id', res.data.data.id)
        setTimeout(() => {
          this.$router.push('/userinfo')
        }, 1000)
      } else {
        alert('格式不正确,请重新输入!')
      }
    }
  }
}
</script>

  <style>

  </style>
